<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="assets/css/login.css" media="all">
    <link rel="stylesheet" type="text/css" href="assets/libs/bgstretcher/bgstretcher.css"/>
    <link rel="stylesheet" type="text/css" href="assets/libs/jigsaw/jigsaw.css"/>
    <script type="text/javascript" src="assets/libs/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="assets/libs/bgstretcher/bgstretcher.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //  Initialize Backgound Stretcher
            $('.login-wrapper').bgStretcher({
                images: ['assets/images/bg/bg1.jpg', 'assets/images/bg/bg2.jpeg', 'assets/images/bg/bg3.jpg', 'assets/images/bg/bg4.jpg', 'assets/images/bg/bg5.jpg', 'assets/images/bg/bg6.jpg'],
                imageWidth: 1920,
                imageHeight: 1080,
                nextSlideDelay: 5000,
                slideDirection: 'N',
                slideShowSpeed: 'slow',
                transitionEffect: 'fade',
                sequenceMode: 'random'
            });
        });
    </script>
</head>
<body>
<div class="login-wrapper">
    <div class="login-header">
        <img src="assets/images/logo.png"> Crown
    </div>
    <div class="login-body">
        <div class="layui-card">
            <div class="layui-card-body layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input name="loginName" type="text" lay-verify="loginName" placeholder="账号" value="crown"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input name="password" type="password" lay-verify="password" placeholder="密码" value="crown"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row inline-block">
                        <div class="layui-col-xs7">
                            <div id="captcha"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                </div>
            </div>
        </div>
    </div>
    <br/><br/><br/>
    <div class="login-footer">
        <p>
            <span><a href="https://github.com/Caratacus/Crown" target="_blank">Github</a></span>
            <span><a href="https://gitee.com/cancerGit/Crown" target="_blank">Gitee</a></span>
        </p>
        <p>© 2018 <a href="javascript:;" target="_blank">Crown版权所有</a></p>
    </div>
</div>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="assets/libs/jigsaw/jigsaw.js"></script>
<script>
    var codeflag = false;
    layui.config({
        base: 'module/'
    }).use(['config', 'form'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var config = layui.config;

        if (config.getToken()) {
            location.replace('./');
            return;
        }
        form.verify({
            loginName: function (value) {
                if (/^\s*$/g.test(value)) {
                    return '请填写用户名';
                }
            },
            password: function (value) {
                if (/^\s*$/g.test(value)) {
                    return '请填写密码';
                }
            }
        });
        // 表单提交
        form.on('submit(login-submit)', function (obj) {
            if (codeflag) {
                layer.load(2);
                $.ajax({
                    url: config.serverUrl + '/account/token',
                    data: JSON.stringify(obj.field),
                    type: 'POST',
                    contentType: 'application/json',
                    success: function (data) {
                        config.putUid(data.result.uid);
                        config.putToken(data.result.token);
                        location.replace('./');
                    },
                    error: function (xhr) {
                        layer.msg(JSON.parse(xhr.responseText).msg, {icon: 5});
                        layer.closeAll('loading');
                    }
                });
            } else {
                layer.msg('请滑动验证框', {icon: 5});
            }
        });

        jigsaw.init(document.getElementById('captcha'), function () {
            codeflag = true;
            layer.msg('验证成功', {time: 888});
        }, function () {
            codeflag = false;
            layer.msg('请继续验证', {time: 888});
        });
    });
</script>
</body>
</html>